<template>
  <view class="container">
    <!-- 固定页面内容部分 -->
    <view class="card1">
      <view class="card1t">
        <text>辅导员今日上报关键词</text>
        <text @click="resetSearch">重置</text>
      </view>
      <view class="card1b">
        <view class="card1b_1" @click="applyFilter('回家')">
          <text>回家</text>
        </view>
        <view class="card1b_2" @click="applyFilter('探亲')">
          <text>探亲</text>
        </view>
      </view>
    </view>

    <!-- 搜索框 -->
    <uni-search-bar placeholder="请输入姓名/学号关键字查询" bgColor="#FFFFFF" @confirm="search" />

    <!-- 显示所有学生信息 -->
    <view v-for="student in filteredStudents" :key="student.id" class="card2">
      <view class="card2t">
        <text>{{ student.name }}</text>
        <text>{{ student.id }}</text>
      </view>
      <view class="card2m">
        <text>学院: {{ student.college }}</text>
        <text>专业: {{ student.major }}</text>
		<text>异常情况说明: {{ student.abnormal }}</text>
      </view>
      <view class="card2b">
        <text>辅导员姓名: {{ student.advisorName }}</text>
        <text>辅导员工号: {{ student.advisorId }}</text>
        <text>辅导员电话: {{ student.advisorPhone }}</text>
      </view>
    </view>
  </view>
</template>


<script setup>
import { ref, computed } from 'vue';
import UniSearchBar from "../../uni_modules/uni-search-bar/components/uni-search-bar/uni-search-bar.vue";

// 模拟学生数据
const students = ref([
  { id: '1001', name: '张三', leave: 2, abnormal: '回家', college: '计算机学院', major: '软件工程', advisorName: '李老师', advisorId: '2001', advisorPhone: '15800000001' },
  { id: '1002', name: '李四', leave: 1, abnormal: '探亲', college: '经济学院', major: '国际贸易', advisorName: '王老师', advisorId: '2002', advisorPhone: '15800000002' },
  { id: '1003', name: '王五', leave: 0, abnormal: '回家', college: '文学学院', major: '汉语言文学', advisorName: '赵老师', advisorId: '2003', advisorPhone: '15800000003' },
  { id: '1004', name: '赵六', leave: 0, abnormal: '回家', college: '历史学院', major: '世界历史', advisorName: '钱老师', advisorId: '2004', advisorPhone: '15800000004' },
]);

// 搜索关键字
const searchQuery = ref('');
// 筛选条件
const selectedFilter = ref('');

// 计算属性：根据筛选条件和搜索关键字动态筛选学生数据
const filteredStudents = computed(() => {
  let filtered = students.value;

  // 根据筛选条件筛选数据
  if (selectedFilter.value) {
    filtered = filtered.filter(student => student.abnormal.includes(selectedFilter.value));
  }

  //trim 消除空格造成的影响
  // 根据搜索关键字进一步筛选数据
  if (searchQuery.value.trim()) {
    filtered = filtered.filter(
        student =>
            student.name.includes(searchQuery.value) ||
            student.id.includes(searchQuery.value)
    );
  }
  return filtered;

});

// 搜索功能
const search = (e) => {
  console.log(e)
  searchQuery.value = e.value;
};

// 重置搜索
const resetSearch = () => {
  searchQuery.value = ''; // 清空搜索关键字
  selectedFilter.value = '';
};

const applyFilter = (filter) => {
  selectedFilter.value=filter;// 设置当前筛选条件
}


</script>


<style scoped>
.container {
  width: 375px;
  margin: 0 auto;
  background-color: #F3F5F9;
}
.card1 {
  width: 351px;
  border: 1px solid;
  border-radius: 12px;
  margin-left: 12px;
  margin-bottom: 12px;
  background-color: #FFFFFF;
}
.card1t {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}
.card1t text:nth-child(1) {
  padding-top: 16px;
  padding-left: 12px;
  font-size: 12px;
  margin-bottom: 12px;
}
.card1t text:nth-child(2) {
  padding-top: 16px;
  padding-right: 12px;
  font-size: 12px;
  color: #006DFF;
}
.card1b {
  padding-left: 12px;
  display: flex;
  flex-direction: row;
  margin-bottom: 18px;
}
.card1b_1 {
  width: 68px;
  height: 28px;
  background: #9C131E;
  border: 1px solid;
  border-radius: 14px;
  line-height: 28px;
  text-align: center;
  margin-right: 10px;
  font-size: 12px;
}
.card1b_2 {
  width: 68px;
  height: 28px;
  border: 1px solid;
  border-radius: 14px;
  line-height: 28px;
  text-align: center;
  font-size: 12px;
}
.card2 {
	width: 327px;
	height: 180px;
	background: #FFFFFF;
	border-radius: 12px;
	margin-left: 12px;
	margin-bottom: 12px;
	margin-top: 16px;
}
.card2t {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}
.card2t text:nth-child(2) {
	font-size: 12px;
	margin-top: 16px;
	margin-right: 12px;
}
.card2t text:nth-child(1) {
	font-size: 15px;
	color: #000000;
	margin-left: 12px;
	margin-top: 16px;
}
.card2m {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 65px;
	margin-bottom: 5px;
}
.card2b {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 65px;
}
.card2m text,.card2b text {
	font-size: 12px;
	margin-left: 12px;
}
</style>

